<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="案例详情 - 飞易腾科技">
    <title>案例详情 - 飞易腾科技</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Tailwind CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="style/fyt.css" rel="stylesheet">
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <i class="fas fa-rocket"></i> 飞易腾科技
            </a>

            <button class="navbar-toggler" type="button" id="navToggle">
                <i class="fas fa-bars"></i>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto align-items-center">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="services.html">服务</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="cases.html">案例</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="news.html">新闻</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about.html">关于</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">联系</a>
                    </li>
                    <li class="nav-item">
                        <span class="dark-mode-toggle" id="darkModeToggle">
                            <i class="fas fa-moon"></i>
                        </span>
                    </li>
                </ul>
            </div>

            <!-- Mobile Menu -->
            <div class="mobile-menu" id="mobileMenu">
                <a class="nav-link" href="index.html">首页</a>
                <a class="nav-link" href="services.html">服务</a>
                <a class="nav-link active" href="cases.html">案例</a>
                <a class="nav-link" href="news.html">新闻</a>
                <a class="nav-link" href="about.html">关于</a>
                <a class="nav-link" href="contact.html">联系</a>
            </div>
        </div>
    </nav>

    <!-- Page Header -->
    <section class="page-header">
        <div class="mesh-bg"></div>
        <div class="container text-center">
            <h1 class="display-4 fw-bold mb-3">案例详情</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center">
                    <li class="breadcrumb-item"><a href="index.html">首页</a></li>
                    <li class="breadcrumb-item"><a href="cases.html">案例</a></li>
                    <li class="breadcrumb-item active">详情</li>
                </ol>
            </nav>
        </div>
    </section>

    <!-- Case Detail Section -->
    <section class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <!-- 案例信息 -->
                    <div class="case-detail-header mb-5">
                        <span class="case-detail-category">电商平台</span>
                        <h1 class="case-detail-title">时尚购物商城</h1>
                        <div class="case-detail-meta">
                            <span><i class="far fa-calendar-alt"></i> 2023-12-15</span>
                            <span><i class="far fa-eye"></i> 3.2k</span>
                            <span><i class="fas fa-tags"></i> 电商、小程序、网站</span>
                        </div>
                    </div>

                    <!-- 案例图片轮播 -->
                    <div class="case-gallery mb-5">
                        <div id="caseCarousel" class="carousel slide" data-bs-ride="carousel">
                            <div class="carousel-indicators">
                                <button type="button" data-bs-target="#caseCarousel" data-bs-slide-to="0" class="active"></button>
                                <button type="button" data-bs-target="#caseCarousel" data-bs-slide-to="1"></button>
                                <button type="button" data-bs-target="#caseCarousel" data-bs-slide-to="2"></button>
                                <button type="button" data-bs-target="#caseCarousel" data-bs-slide-to="3"></button>
                            </div>
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <img src="https://images.unsplash.com/photo-1661956602116-aa6865609028?w=1200" class="d-block w-100" alt="案例图片1">
                                </div>
                                <div class="carousel-item">
                                    <img src="https://images.unsplash.com/photo-1472851294608-062f824d29cc?w=1200" class="d-block w-100" alt="案例图片2">
                                </div>
                                <div class="carousel-item">
                                    <img src="https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=1200" class="d-block w-100" alt="案例图片3">
                                </div>
                                <div class="carousel-item">
                                    <img src="https://images.unsplash.com/photo-1534452203293-494d7ddbf7e0?w=1200" class="d-block w-100" alt="案例图片4">
                                </div>
                            </div>
                            <button class="carousel-control-prev" type="button" data-bs-target="#caseCarousel" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon"></span>
                                <span class="visually-hidden">上一张</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#caseCarousel" data-bs-slide="next">
                                <span class="carousel-control-next-icon"></span>
                                <span class="visually-hidden">下一张</span>
                            </button>
                        </div>
                    </div>

                    <!-- 案例描述 -->
                    <div class="case-detail-content">
                        <h2 class="mb-4">项目背景</h2>
                        <p>本项目是为某知名时尚品牌打造的线上购物平台，旨在为消费者提供便捷、优质的购物体验。项目涵盖PC端网站、移动端H5和微信小程序三个平台，实现了全渠道覆盖。</p>

                        <h2 class="mt-5 mb-4">解决方案</h2>
                        <p>我们采用了现代化的技术架构，使用React构建前端应用，Node.js搭建后端服务。整个系统具有高性能、高可用、易扩展的特点。</p>

                        <h3 class="mt-4 mb-3">核心功能</h3>
                        <ul class="case-features-list">
                            <li><i class="fas fa-check-circle"></i> 商品展示与搜索 - 支持多维度筛选，智能推荐</li>
                            <li><i class="fas fa-check-circle"></i> 购物车与订单 - 流畅的购物流程，实时订单追踪</li>
                            <li><i class="fas fa-check-circle"></i> 支付系统 - 集成微信支付、支付宝等多种支付方式</li>
                            <li><i class="fas fa-check-circle"></i> 会员系统 - 积分、优惠券、等级体系</li>
                            <li><i class="fas fa-check-circle"></i> 物流管理 - 对接主流物流公司，实时查询</li>
                            <li><i class="fas fa-check-circle"></i> 数据分析 - 全面的商品、用户、订单数据统计</li>
                        </ul>

                        <h2 class="mt-5 mb-4">项目成果</h2>
                        <p>项目上线后，获得了客户和用户的高度认可。平台日均访问量达到10万+，月成交额超过500万元。优秀的用户体验和完善的功能，为品牌的线上业务增长提供了强有力的支撑。</p>

                        <div class="row mt-5 mb-4">
                            <div class="col-md-3 col-6 mb-3">
                                <div class="case-result-card">
                                    <div class="case-result-number">10万+</div>
                                    <div class="case-result-label">日均访问量</div>
                                </div>
                            </div>
                            <div class="col-md-3 col-6 mb-3">
                                <div class="case-result-card">
                                    <div class="case-result-number">500万+</div>
                                    <div class="case-result-label">月成交额</div>
                                </div>
                            </div>
                            <div class="col-md-3 col-6 mb-3">
                                <div class="case-result-card">
                                    <div class="case-result-number">98%</div>
                                    <div class="case-result-label">客户满意度</div>
                                </div>
                            </div>
                            <div class="col-md-3 col-6 mb-3">
                                <div class="case-result-card">
                                    <div class="case-result-number">5万+</div>
                                    <div class="case-result-label">注册用户</div>
                                </div>
                            </div>
                        </div>

                        <h2 class="mt-5 mb-4">技术栈</h2>
                        <div class="tech-tags">
                            <span class="tech-tag">React</span>
                            <span class="tech-tag">Node.js</span>
                            <span class="tech-tag">MongoDB</span>
                            <span class="tech-tag">Redis</span>
                            <span class="tech-tag">微信小程序</span>
                            <span class="tech-tag">Docker</span>
                            <span class="tech-tag">Nginx</span>
                            <span class="tech-tag">Webpack</span>
                        </div>
                    </div>
                </div>

                <!-- 侧边栏 -->
                <div class="col-lg-4">
                    <div class="case-sidebar">
                        <div class="case-sidebar-card mb-4">
                            <h3 class="case-sidebar-title">项目信息</h3>
                            <div class="case-info-item">
                                <strong>客户：</strong>
                                <span>某时尚品牌</span>
                            </div>
                            <div class="case-info-item">
                                <strong>行业：</strong>
                                <span>电商零售</span>
                            </div>
                            <div class="case-info-item">
                                <strong>服务：</strong>
                                <span>网站开发、小程序开发</span>
                            </div>
                            <div class="case-info-item">
                                <strong>周期：</strong>
                                <span>3个月</span>
                            </div>
                            <div class="case-info-item">
                                <strong>完成时间：</strong>
                                <span>2023年12月</span>
                            </div>
                        </div>

                        <div class="case-sidebar-card mb-4">
                            <h3 class="case-sidebar-title">相关案例</h3>
                            <div class="related-case-item">
                                <img src="https://images.unsplash.com/photo-1472851294608-062f824d29cc?w=200" alt="相关案例">
                                <div class="related-case-info">
                                    <h4>生活家居商城</h4>
                                    <p>电商平台</p>
                                </div>
                            </div>
                            <div class="related-case-item">
                                <img src="https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=200" alt="相关案例">
                                <div class="related-case-info">
                                    <h4>美妆电商平台</h4>
                                    <p>电商平台</p>
                                </div>
                            </div>
                        </div>

                        <div class="case-sidebar-card">
                            <h3 class="case-sidebar-title">联系我们</h3>
                            <p class="mb-3">如果您对此案例感兴趣，欢迎联系我们了解更多详情</p>
                            <a href="contact.html" class="cta-button w-100 text-center">
                                立即咨询 <i class="fas fa-arrow-right ms-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="友links-section">
                <h4 class="text-center mb-4" style="color: white; font-weight: 600;">友情链接</h4>
                <div class="row">
                    <div class="col-12">
                        <div class="friendly-links">
                            <a href="https://www.aliyun.com" target="_blank" class="friendly-link">阿里云</a>
                            <a href="https://cloud.tencent.com" target="_blank" class="friendly-link">腾讯云</a>
                            <a href="https://www.huaweicloud.com" target="_blank" class="friendly-link">华为云</a>
                            <a href="https://github.com" target="_blank" class="friendly-link">Github</a>
                            <a href="https://www.bootcdn.cn" target="_blank" class="friendly-link">BootCDN</a>
                            <a href="https://www.npmjs.com" target="_blank" class="friendly-link">NPM</a>
                            <a href="https://developer.mozilla.org" target="_blank" class="friendly-link">MDN</a>
                            <a href="https://stackoverflow.com" target="_blank" class="friendly-link">StackOverflow</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-center my-5">
                <div class="footer-links mb-4">
                    <a href="#" class="social-icon" title="微信"><i class="fab fa-weixin"></i></a>
                    <a href="#" class="social-icon" title="微博"><i class="fab fa-weibo"></i></a>
                    <a href="#" class="social-icon" title="Github"><i class="fab fa-github"></i></a>
                    <a href="#" class="social-icon" title="领英"><i class="fab fa-linkedin"></i></a>
                    <a href="#" class="social-icon" title="Twitter"><i class="fab fa-twitter"></i></a>
                </div>
                <p class="mb-2" style="font-size: 1rem;">&copy; 2024 飞易腾科技 版权所有</p>
                <p class="text-muted small mb-4">专注于创新的网站建设服务 | 飞速响应 · 易用体验 · 腾飞助力</p>
            </div>

            <div class="footer-bottom">
                <div class="row align-items-center">
                    <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
                        <div class="qrcode-section">
                            <div class="qrcode-item">
                                <div class="qrcode-placeholder">
                                    <i class="fab fa-weixin" style="font-size: 4rem; color: #07c160;"></i>
                                    <p class="mt-2 mb-0" style="font-size: 0.85rem;">微信公众号</p>
                                </div>
                            </div>
                            <div class="qrcode-item">
                                <div class="qrcode-placeholder">
                                    <i class="fas fa-qrcode" style="font-size: 4rem; color: #6366f1;"></i>
                                    <p class="mt-2 mb-0" style="font-size: 0.85rem;">微信小程序</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8 col-md-6">
                        <div class="beian-info">
                            <p class="mb-2">
                                <i class="fas fa-shield-alt me-2"></i>
                                <a href="https://beian.miit.gov.cn" target="_blank" class="beian-link">粤ICP备2024123456号-1</a>
                            </p>
                            <p class="mb-2">
                                <i class="fas fa-balance-scale me-2"></i>
                                <a href="http://www.beian.gov.cn" target="_blank" class="beian-link">
                                    <img src="" alt="" class="me-1" style="vertical-align: text-bottom;">
                                    粤公网安备 44030502000000号
                                </a>
                            </p>
                            <p class="mb-2">
                                <i class="fas fa-copyright me-2"></i>
                                增值电信业务经营许可证：粤B2-20240000
                            </p>
                            <p class="mb-0 small text-muted">
                                <i class="fas fa-map-marker-alt me-2"></i>
                                公司地址：广东省深圳市南山区科技园南区深圳湾科技生态园
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="footer-disclaimer">
                <p class="mb-0 small">
                    本网站所有内容及图片均受法律保护，未经许可不得转载、复制或镜像。
                    <span class="mx-2">|</span>
                    网站内容仅供参考，不作为任何法律依据。
                </p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>

    <script>
        // Navbar Scroll Effect
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

        // Mobile Menu Toggle
        const navToggle = document.getElementById('navToggle');
        const mobileMenu = document.getElementById('mobileMenu');

        navToggle?.addEventListener('click', function() {
            mobileMenu.classList.toggle('active');
        });

        // Dark Mode Toggle
        const darkModeToggle = document.getElementById('darkModeToggle');
        const body = document.body;

        if (localStorage.getItem('darkMode') === 'enabled') {
            body.classList.add('dark-mode');
            darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
        }

        darkModeToggle.addEventListener('click', function() {
            body.classList.toggle('dark-mode');

            if (body.classList.contains('dark-mode')) {
                localStorage.setItem('darkMode', 'enabled');
                darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
            } else {
                localStorage.setItem('darkMode', null);
                darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>';
            }
        });

        // Scroll Animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);

        document.querySelectorAll('.fade-in').forEach(element => {
            observer.observe(element);
        });
    </script>
</body>
</html>
